<template>
  <el-cascader
    style="width: 250px"
    :value="cityVal"
    :options="cityList"
    @change="handleChange"
    filterable
    clearable
  ></el-cascader>
</template>
<script>
import city from "@/utils/city.json";
export default {
  data() {
    return {
      // 城市列表
      cityList: []
    };
  },
  props: {
    // type：1：省市区  2：省市
    type: {
      type: String,
      default: "1"
    },
    cityVal: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  created() {
    if (this.type === "1") {
      this.cityList = city.children;
    } else if (this.type === "2") {
      let arr = JSON.parse(JSON.stringify(city.children));
      arr.forEach(item => {
        if (item.children) {
          item.children.forEach(i => {
            delete i.children;
          });
        }
      });
      this.cityList = arr;
    }
  },
  methods: {
    handleChange(val) {
      this.$emit("update:cityVal", val);
      this.$emit("changeCity", val);
    }
  }
};
</script>
<style lang="sass" scoped></style>
